<template>
  <div>
    <a-tabs type="card" plain>
      <a-tab-pane key="1" tab="白名单管理"
        ><div class="demo-page-header">
          <a-page-header :ghost="false" title="白名单列表">
            <template #extra>
              <a-button
                key="1"
                type="primary"
                plain
                class="sp2"
                @click="addwhite"
                >新增</a-button
              >
            </template>
          </a-page-header>
          <span class="sp"> 搜索：</span>
          <el-input
            class="s-1"
            v-model="find4.name"
            placeholder="请输入人员姓名"
          ></el-input>
          所在项目：
          <el-select
            v-model="find4.loveitem"
            class="m-4"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button class="sp1" @click="getList">搜索</el-button>
          <el-table :data="whiteList" style="width: 100%" highlight-current-row>
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="80"
              header-align="center"
              align="center"
            />
            <el-table-column prop="name" label="人员姓名" width="100" />
            <el-table-column
              prop="idNumber"
              label="证件号"
              width="160"
              header-align="center"
              align="center"
            />
            <el-table-column
              prop="sex"
              label="性别"
              width="100"
              header-align="center"
              align="center"
            />
            <el-table-column
              prop="phone"
              label="联系电话"
              width="120"
              header-align="center"
              align="center"
            />

            <el-table-column
              prop="loveitem"
              label="适用项目"
              width="220"
              header-align="center"
              align="center"
            />

            <el-table-column
              prop="itime"
              label="有效日期"
              width="200"
              header-align="center"
              align="center"
            />
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button
                  size="small"
                  type="danger"
                  class="sp2"
                  @click="xiugai(scope.row.id)"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="亲，您真的要删除吗?"
                  @confirm="deleteflow(scope.row.id)"
                >
                  <template #reference>
                    <el-button class="del">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <Addwhite v-show="isShow3" @aaa="cha" @asd="chaxun"></Addwhite>
          <Xiugai
            v-show="isShow4"
            @ccc="chengea"
            :id="editid"
            @sx="shuaxin"
          ></Xiugai></div
      ></a-tab-pane>
      <a-tab-pane key="2" tab="黑名单管理"
        ><div class="demo-page-header">
          <a-page-header :ghost="false" title="黑名单列表">
            <template #extra>
              <a-button key="1" type="primary" plain class="sp2">新增</a-button>
            </template>
          </a-page-header>
          <span class="sp"> 搜索：</span>
          <el-input
            class="s-1"
            v-model="find5.name"
            placeholder="请输入人员姓名"
          ></el-input>

          所在项目：
          <el-select
            v-model="find5.loveitem"
            clearable
            class="m-4"
            size="large"
            placeholder="---请选择---"
          >
            <el-option
              v-for="item in list2"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <el-button class="sp1" @click="getList1">搜索</el-button>
          <el-table
            :data="whiteList1"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="80"
              header-align="center"
              align="center"
            />
            <el-table-column prop="name" label="人员姓名" width="100" />
            <el-table-column
              prop="idNumber"
              label="证件号"
              width="160"
              header-align="center"
              align="center"
            />
            <el-table-column
              prop="sex"
              label="性别"
              width="100"
              header-align="center"
              align="center"
            />
            <el-table-column
              prop="phone"
              label="联系电话"
              width="120"
              header-align="center"
              align="center"
            />

            <el-table-column
              prop="loveitem"
              label="适用项目"
              width="220"
              header-align="center"
              align="center"
            />

            <el-table-column
              prop="itime"
              label="有效日期"
              width="200"
              header-align="center"
              align="center"
            />
            <el-table-column label="操作" header-align="center" align="center">
              <template #default="scope">
                <el-button size="small" type="danger" class="sp2"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="亲，您真的要删除吗?"
                  @confirm="deleteflow(scope.row.id)"
                >
                  <template #reference>
                    <el-button class="del">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div></a-tab-pane
      >
    </a-tabs>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import Addwhite from "./addwhiteperson.vue";
import Xiugai from "./xiugai.vue";
interface whiteblackList {
  id: string;
  name: string;
  idNumber: string;
  sex: string;
  phone: string;
  workerType: string;
  worker: string;
  loveitem: string;
  contractor: string;
  teams: string;
  state: number;
  professionalType: string;
  gangwei: string;
  itime: string;
}
const whiteList = reactive<whiteblackList[]>([]);
const list1 = reactive([
  "XXX项目1",
  "XXX项目2",
  "XXX项目3",
  "XXX项目1/XXX项目2",
  "XXX项目1/XXX项目2/XXX项目3",
]);
const find4 = reactive<{
  name?: string;
  loveitem?: string;
}>({});
const getList = () => {
  service({
    url: "flower",
    method: "get",
    params: find4,
  }).then((res) => {
    whiteList.length = 0;
    whiteList.push(...res.data);
    find4.name = null;
    find4.loveitem = null;
  });
};
getList();
const deleteflow = (id: string) => {
  console.log(id);
  service({
    url: "flower/" + id,
    method: "delete",
  }).then((res) => {
    ElMessage({
      message: "删除成功！",
      type: "success",
    });
    getList();
  });
};
const whiteList1 = reactive<whiteblackList[]>([]);
const list2 = reactive([
  "XXX项目1",
  "XXX项目2",
  "XXX项目3",
  "XXX项目1/XXX项目2",
  "XXX项目1/XXX项目2/XXX项目3",
]);
const find5 = reactive<{
  name?: string;
  loveitem?: string;
}>({});
const getList1 = () => {
  service({
    url: "flower",
    method: "get",
    params: find5,
  }).then((res) => {
    whiteList1.length = 0;
    whiteList1.push(...res.data);
    find5.name = null;
    find5.loveitem = null;
  });
};
getList1();
const isShow3 = ref(false);
const addwhite = () => {
  isShow3.value = true;
};
const cha = () => {
  isShow3.value = false;
};
const chaxun = () => {
  getList();
};
const isShow4 = ref(false);

const chengea = () => {
  isShow4.value = false;
};

const editid = ref("");
const xiugai = (id: string) => {
  editid.value = id;
  isShow4.value = true;
};
const shuaxin = () => {
  getList();
};
</script>

<style scoped>
.demo-page-header :deep(tr:last-child td) {
  padding-bottom: 0;
}
.el-input {
  width: 200px;
  margin-right: 20px;
}

.el-select {
  width: 120px;
  margin-right: 20px;
}
.sp {
  margin-left: 20px;
}
.sp1 {
  background-color: rgba(26, 188, 156, 1);
  color: white;
  border: none;
}
.sp2 {
  background-color: rgba(26, 188, 156, 1);
  color: white;
  border: none;
}
.el-input {
  height: 30px;
}

.m-4 {
  width: 110px;
}
.s-1 {
  width: 200px;
}
.el-pagination {
  float: right;
}
</style>